<template>
<div style="height:100%">
  <div class="prdlist">
  <el-form ref="form" :model="form" label-width="80px">

<div style="display: flex;">
  <div class="block">
  <span class="demonstration">可用金额</span>
    <h2>{{wallet.useableBalance}}</h2>
     <el-button type="warning" round>我要提现</el-button>
</div>
  <div class="block">
  <span class="demonstration1">冻结金额</span>
  <h2>{{wallet.forzenBalance}}</h2>
  
</div>
<div class="block">
  <span class="demonstration1"> 账户总金额</span>
  <h2>{{wallet.totalBalance}}</h2>
  
</div>


</div>
    


</el-form>

<div style="margin: 15px;">
  <label>账户交易记录</label>
  </div>
  <div>
  <el-table
    :data="tableDatapolicy"
    stripe
   
    border
    style="width: 98%;margin-left: 1%;">
    <el-table-column
  
      label="交易时间"
      width="200">
      <template slot-scope="scope">
        {{df(scope.row.tday)}}
      </template>
    </el-table-column>
       <el-table-column
       label="交易类别"
      width="100">
      <template slot-scope="scope">
        {{scope.row.yuedirection==1?'支出':'收入'}}
      </template>
    </el-table-column>
           <el-table-column
       label="交易类型"
      width="100">
       <template slot-scope="scope">
        {{scope.row.comment}}
      </template>
    </el-table-column>
    <el-table-column
       label="交易金额"
      width="200">
      <template  slot-scope="scope">
      {{scope.row.yuedirection==1?Math.round(scope.row.expend*100)/100:Math.round(scope.row.income*100)/100}}

      </template>
    </el-table-column>
    <el-table-column
      label="交易状态">
       已完成
     </el-table-column>
     <el-table-column
    
      label="账户余额"
      width="200">
            <template  slot-scope="scope">
      {{ Math.round(scope.row.yuealter*100)/100}}

      </template>
  
    </el-table-column>
    <el-table-column
      prop="id"
      label="流水单号"
      width="200">
    </el-table-column>
  </el-table>
    <div class="block" style='width:100%'>
       <el-pagination
       @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="10"
      background
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>  
  </div>
  </div>
</div>
</template>
<script>
import {gettrans, balance,getmember,getrecords,getpolicys,getpolicysbycustomeridofjjr} from '@/api/policy'
import { switchCase, isSwitchCase } from '@babel/types';
import { regionData } from 'element-china-area-data'

  export default {
    name:'commission',
    data() {
      return {
        wallet:{},
        total:0,
        options: regionData,
        selectedOptions: [],
           tableDatapolicy:[],
             tableDatarecord:[],
             policypage:1,
             recordpage:1,
             policysize:100,
             recordsize:100,
             page:1,
             size:10,
        form: {
          name: '极乐空间',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          buycount:0,
          recordcount:0,
          card:'',
          
        
        },
        user:{},
      }
    },
    mounted()
    {
      this.user=JSON.parse(localStorage.getItem('user'))
       this.getbalance();
       this.gettrans();
       
  
    },
    methods: {
      handleCurrentChange(){
     this.gettrans();
},
       //返回 01-12 的月份值   
  getMonth(date){  
    var month = "";  
    month = date.getMonth() + 1; //getMonth()得到的月份是0-11  
    if(month<10){  
        month = "0" + month;  
    }  
    return month;  
}  ,
//返回01-30的日期  
  getDay(date){  
    var day = "";  
    day = date.getDate();  
    if(day<10){  
        day = "0" + day;  
    }  
    return day;  
},
//返回小时
  getHours(date){
    var hours = "";
    hours = date.getHours();
    if(hours<10){  
        hours = "0" + hours;  
    }  
    return hours;  
},
//返回分
  getMinutes(date){
    var minute = "";
    minute = date.getMinutes();
    if(minute<10){  
        minute = "0" + minute;  
    }  
    return minute;  
},
//返回秒
  getSeconds(date){
    var second = "";
    second = date.getSeconds();
    if(second<10){  
        second = "0" + second;  
    }  
    return second;  
},
 
        df(longTypeDate){  
    var datetimeType = "";  
    var date = new Date();  
    date.setTime(longTypeDate);
    datetimeType = date.getFullYear()+"-"+this.getMonth(date)+"-"+this.getDay(date)+" "+this.getHours(date)+":"+this.getMinutes(date)+":"+this.getSeconds(date);//yyyy-MM-dd 00:00:00格式日期
    return datetimeType;
} ,
        getbalance(id){


       balance( ).then(res => {
        if (res.code == 200) {
               this.wallet=res.result.wallet;
        } 
        else{
          this.$toast(res.message)
        }
      });
    },
       gettrans(id){
  this.$loadingshow();
var dt={};
dt={

 organid: this.user.organid ,
page: this.page,
size: this.size,
branch: true,
begintime: 0,
endtime: 0,
}
       gettrans(dt ).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
        
               this.tableDatapolicy=res.result;
               if(res.result.length>0)
               this.total=res.result[0].total;
        } 
        else{
          this.$toast(res.message)
        }
      });
    },

  getpolicys(){

        this.$loadingshow();

       getpolicysbycustomeridofjjr({ page:this.policypage,size:this.policysize,customerid:this.$route.query.id}).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
              this.tableDatapolicy=res.result.list;
              this.form.buycount=res.result.list.length;
              this.tableDatapolicy.forEach(element => {
                 element.createTime= this.getNowFormatDate(  element.begintime);
              });
              document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
            
         } 
        else{
          this.$toast(res.message)
        }
      });
    },
    formatstatusofpolicy(status)
    {
//获取保单统计情况：待支付0，已支付待核保1，已支付已核保待生效（投保成功）2，已生效保障中（保障中）3，已失效（已过保险期限)4 已撤单5 已核保被拒（退款）6 已赔偿或理赔中7 历史保单8 优嘉确认中9
//  if(status==0)
//      return '待支付'
//      else if(status==1)
//        return '已支付待核保'
//             else if(status==2)
//        return '待生效'
//             else if(status==3)
//        return '保障中'
//             else if(status==4)
//        return '已失效'
//             else if(status==5)
//        return '已撤单'
//             else if(status==6)
//        return '核保被拒'
//            else if(status==7)
//        return '理赔中'
//             else if(status==8)
//        return '历史订单'
//           else if(status==9)
//        return '理赔审核中'
      if(status==0)
      return '待支付'
      else  if(status==1)
      return '保障中'
            else  if(status==2)
      return '已逾期'
            else  if(status==3)
      return '已失效'
            else  if(status==4)
      return '已关闭'
            else  if(status==5)
      return '已删除'
            
    },
      formatstatus(status){
//0（资料不全)刚提交 1审核中 2已赔付 3 已被拒 4 旅行机构审核中 5机构审核通过 6 机构审核拒绝 7超管审核通过
     if(status==0)
     return '资料不全'
     else if(status==1)
       return '审核中'
            else if(status==2)
       return '已赔付'
            else if(status==3)
       return '已被拒'
            else if(status==4)
       return '客户公司审核中'
            else if(status==5)
       return '机构审核通过'
            else if(status==6)
       return '机构审核拒绝'
           else if(status==7)
       return '超管审核通过'

    }
,
  getrecords(){

        this.$loadingshow();
       getrecords({ page:this.recordpage,size:this.recordsize,userid:this.$route.query.id}).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
          
              this.tableDatarecord=res.result;
                            this.form.recordcount=res.result.length;
      
          
                  this.tableDatarecord.forEach(element => {
                 element.createtime= this.getNowFormatDate(  element.createtime);
              });
             document.getElementsByClassName('el-table__body-wrapper')[1].style.height='auto';

         } 
        else{
          this.$toast(res.message)
        }
      });
    },













    getNowFormatDate(dt) {
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },





      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<style lang="scss" scoped>
.prdlist{
  width:90%;
  height: 100%;
  margin: 2%;
}
.block {
  padding: 30px 0;
    text-align: center;
    border-right: 1px solid #eff2f6;
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
}
.demonstration {
    display: block;
    color: darkorange;
    font-size: 14px;
    margin-bottom: 20px;
}
.demonstration1 {
    display: block;
    color: dimgrey;
    font-size: 14px;
    margin-bottom: 20px;
}
.el-form-item{
  width:350px;
  margin-right: 50px;
}
.el-cascader{
  width:270px;
}
.account{
  margin-left: 15px;
  font-size: 14px;
  margin-bottom: 40px;
  color: darkgray;
}
</style>
